<template>
    <div class="container">
        <div class="upload-box">
            <input type="file" @input="handleChange">
            <div class="upload-text">
                <PlusOutlined />
                <span>上传文件</span>
            </div>
        </div>
        <div class="loader">
            <div class="item">
                <span class="label">转化类型：</span>
                <a-select style="width: 200px;"v-model:value="type">
                    <a-select-option value="gif">gif</a-select-option>
                    <a-select-option value="mp3">mp3</a-select-option>
                    <a-select-option value="clip">视频截取</a-select-option>
                    <a-select-option value="text-watermark">文字水印</a-select-option>
                    <a-select-option value="remove-watermark">删除水印</a-select-option>
                </a-select>
            </div>
            <div class="item" v-if="type==='clip'">
                截取区间
                <a-input style="width: 100px;" v-model:value="begin"></a-input>
                <a-input style="width: 100px;" v-model:value="end"></a-input>
            </div>
            <div class="item" v-if="type==='text-watermark'">
                <a-input style="width: 200px;" v-model:value="text"></a-input>
            </div>
            <a-button class="item" type="primary" @click="handleUpload" :loading="loading">提交</a-button>
        </div>
        <div class="upload-demo">
            <div class="list-item" v-for="item in fileList">
                <span>{{ getFileSize(item.size) }}</span>
                <img  :src="item.url" />
                <span v-if="item.compressSize">{{ getFileSize(item.compressSize) }}</span>
                <span v-if="item.compressSize">{{getDecreaseRatio(item.compressSize,item.size)}}</span>
                <DownloadOutlined @click="download(item.url)" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { LoadingOutlined, PlusOutlined,DownloadOutlined } from '@ant-design/icons-vue'
import { upload,merge,editVideo,downloadFile} from '@/api/tools/tinypng/index'
import {getFileSize,getDecreaseRatio} from '@/assets/utils/index'
import axios from 'axios'
import {saveAs} from 'file-saver'
const fileList = ref([])
const file = ref(null)
const loading = ref(false)
const type = ref('gif')
const begin = ref(0)
const end = ref(0)
const text = ref('')
const chunkFiles = (files, chunkSize=1024*1024) => {
    const chunks = []
    for (let i = 0; i < files.size; i += chunkSize) {
        const chunk = files.slice(i, i + chunkSize)
        chunks.push(chunk)
    }
    return chunks
}

const uploadFile = (file, index,name) => {
    const formData = new FormData()
    formData.append('index', index)
    formData.append('name', name)
    formData.append('file', file)
    return upload(formData,{
        headers:{
            "content-type": "multipart/form-data"
        }
    })
}

const handleChange = (e) => {
    file.value = e.target.files[0]
}

const handleUpload = async () => {
    const chunks = chunkFiles(file.value)
    const res = []
    
    for(let i in chunks){
        res.push(uploadFile(chunks[i],i,file.name))
    }
    Promise.all(res).then(async data => {
        // 上传完成
        await merge({
            name: file.value.name,
            delete:true
        })
        // 处理编辑
        await editVideo({
            name: file.value.name,//服务器查找文件
            type:type.value,
            begin:type.value==='clip'?begin.value:0,
            end:type.value==='clip'?end.value:0,
            text:type.value==='text-watermark'?text.value:''
        }).then(async res=>{
            // 下载文件
            const resp = await downloadFile({
                name:res.name,
            },{
                responseType:'blob'
            })
            
            let type = 'audio/mp3'
            if(res.name.endsWith('.mp3')){
                type = 'audio/mp3'
            }
            if(res.name.endsWith('.mp4')){
                type = 'audio/mp4'
            }
            if(res.name.endsWith('.gif')){
                type = 'image/gif'
            }
            const blob = new Blob([resp], { type })
            saveAs(blob,res.name)
        })
        loading.value = false
    })
}

const download = (url,fileNme='1.png')=>{
    // a标签下载
    const a = document.createElement('a')
    a.href = url
    a.download = fileNme
    a.click()
}





</script>

<style lang="scss" scoped>
    .upload-box{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content:center;
        align-items:center;
        border: 1px dashed #ccc;
        cursor: pointer;
        position: relative;
        border-radius: 5px;
        margin:0 auto;
        input{
            opacity:0;
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .upload-text{
            position: absolute;
            display: flex;
            justify-content:center;
            align-items:center;
            width: 100%;
            height: 100%;
            color: #999;
            font-size: 16px;
            font-weight: bold;
            border-radius: 5px;
            transition: all 0.3s ease;
            pointer-events: none;
            &:hover{
                background-color: #f2f2f2;
            }
        }
}
.list-item{
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    img{
        width: 80px;
        height: 80px;
    }
    span{
        margin:0 12px;
    }
}
.item{
    margin-top: 20px;
}
.loader{
    margin: 20px 0;
}
</style>